<!--安全监管-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div v-show="shows" style="display: flex;flex-direction: row">
                <div class="container2">
                    <div class="container_title3">
                        <span>智能高空瞭望</span>
                    </div>
                    <importance1/>
                </div>
                <div class="container">
                    <div class="container_title3">
                        <span>重点监控</span>
                    </div>
                    <div class="container2_emphasis userFlex">

                        <!--时达绿能-->
                        <importance2/>
                        <!--森泰天然气-->
                        <importance6/>
                        <!--富源水务-->
                        <importance8/>
                        <!--盛鲁电厂-->
                        <importance7/>
                        <!--长城二矿-->
                        <importance5/>
                        <!--榆树井-->
                        <importance3/>
                        <!--长城煤矿-->
                        <importance4/>
                        <!--恒坤化工-->
                        <importance9/>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
    </div>
</template>

<script>
import importance1 from "@/components/camera/importance1/importance1.vue";
import importance2 from "@/components/camera/importance2/importance2.vue";
import importance3 from "@/components/camera/importance3/importance3.vue";
import importance4 from "@/components/camera/importance4/importance4.vue";
import importance5 from "@/components/camera/importance5/importance5.vue";
import importance6 from "@/components/camera/importance6/importance6.vue";
import importance7 from "@/components/camera/importance7/importance7.vue";
import importance8 from "@/components/camera/importance8/importance8.vue";
import importance9 from "@/components/camera/importance9/importance9.vue";
import {getAuth} from "@/api/consumption/axios";
import bus from '@/utils/bus'
import {getIntellect} from "@/api/safety/axios";

export default {
    name: "floatLeft",
    components: {
        importance1,
        importance2,
        importance3,
        importance4,
        importance5,
        importance6,
        importance7,
        importance8,
        importance9
    },
    data() {
        return {
            shows: true,
            //智能高空瞭望
            videoDatas: '',
            //设备点位
            facilityData: '',
            ownerCodes: '',
            //视频id
            selectedFacility: null,
            dataFetched: 'false',
            // 道路智能卡口监测
            tableList: [
                {
                    name: "蒙L2VU33",
                    output: require("@/assets/bgc_car1.png"),
                    profit: "违法",
                    firm: "2023-07-08 01:44:06",
                    up: "违法",
                },
                {
                    name: "蒙L2VU33",
                    output: require("@/assets/bgc_car2.png"),
                    profit: "违法",
                    firm: "2023-07-08 01:44:06",
                    up: "违法",
                },
                {
                    name: "蒙L2VU33",
                    output: require("@/assets/bgc_car3.png"),
                    profit: "违法",
                    firm: "2023-07-08 01:44:06",
                    up: "违法",
                },
                {
                    name: "蒙L2VU33",
                    output: require("@/assets/bgc_car3.png"),
                    profit: "违法",
                    firm: "2023-07-08 01:44:06",
                    up: "违法",
                },
                {
                    name: "蒙L2VU33",
                    output: require("@/assets/bgc_car3.png"),
                    profit: "违法",
                    firm: "2023-07-08 01:44:06",
                    up: "违法",
                },
            ],

        }
    },
    mounted() {
        // 图片token
        this.getAuth()
        this.getIntellect()
    },
    methods: {
        // 图片token
        getAuth() {
            let _this = this
            getAuth().then((res) => {
                _this.tokenData = res.accessToken
                bus.$emit('token', _this.tokenData)
                console.log(bus.$emit('token', _this.tokenData), '图片toke111111n')
            })
        },
        getIntellect() {
            let _this = this
            let params = {
                'pageNum': 1,
                'pageSize': 100,
                // 'ownerCodes': ownerCodes
            }
            getIntellect(params).then((res) => {
                console.log(res, '摄像头设备')
                _this.facilityData = res.data[0].data.pageData // 设置为合适的属性值
                const targetKeywords = ["榆树井", "长城煤矿", "长城二矿", "森泰天然气", '盛鲁电厂', '富源水务', '时达绿能'];
                // 筛选出deviceName包含目标关键词的数据
                this.videoDatas = this.facilityData.filter(item =>
                    targetKeywords.some(keyword => item.deviceName.includes(keyword))
                );
                console.log(_this.videoDatas, '全部数据')
            })
        },
    }
}
</script>

<style lang="scss">
.height200 {
  width: 570px;
  height: 200px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.statistical-scrollbar {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.camera {
  .el-dropdown .el-button-group {
    height: 28px;
    width: 150px;

    .el-button--primary {
      background: rgba(98, 183, 255, 0.2);
      box-shadow: inset 0px 0px 12px 0px #62b7ff;
      border: 1px solid #62b7ff;
    }
  }

  &-ulBox2 {
    width: 105px;
    height: 50px;
    background: #082048;
    box-shadow: inset 0px 0px 12px 0px #62b7ff;
    border: 1px solid #62b7ff;
  }
}

.container2 {
  .el-dropdown .el-button-group {

    .el-button--primary {
      background: rgba(98, 183, 255, 0.2);
      box-shadow: inset 0px 0px 12px 0px #62b7ff;
      border: 1px solid #62b7ff;
    }
  }

  &-ulBox {
    width: 190px;
    height: 50px;
    background: #082048;
    box-shadow: inset 0px 0px 12px 0px #62b7ff;
    border: 1px solid #62b7ff;
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .container {
    height: calHeight_2k(28px);

    &-ulBox2 {
      height: calHeight_2k(50px);
    }
  }

  .height200 {
    height: calHeight_2k(200px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .statistical-scrollbar {
    height: calHeight_2k(130px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}

.userFlex {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
<style lang="scss" scoped>
.ws-player {
  width: 260px;
  height: 120px;
  margin-top: 8px;
}

.marginL21 {
  margin-left: 21px;
}

.marginL13 {
  margin-left: 6px;
}

.rightView {
  float: right;
  margin-top: 20px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;
    cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 280px;
    height: 600px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_3_1.png");
    flex-direction: column;

    &-camera {
      width: 260px;

      &_firm {
        width: 260px;
        height: 180px;
        margin-top: 10px;
        position: relative;

        &_fontColor {
          font-size: 14px;
          font-family: Noto Sans SC-Medium, Noto Sans SC;
          font-weight: 500;
          color: #00e6ff;
        }

        &_imgBox {
          width: 100%;
          height: 90px;
          margin-top: 8px;
        }
      }
    }


    &-titleBgc {
      width: 260px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_title3 {
      width: 260px;
      height: 24px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 24px;
          margin-left: 11px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_intention {
      width: 238px;
      position: relative;
      height: 161px;

      &_line {
        width: 100%;
        height: 1px;
        background: #EEEBE9;
        opacity: 0.4;
      }

      &_bg {
        position: absolute;
        width: 238px;
        height: 161px;
        background: #19508E;
        opacity: 0.36;
      }

      &_title {
        text-align: center;
        width: 25%;
        height: 18px;
        line-height: 18px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.4;
      }

      &_type {
        width: 25%;
        height: 30px;
        line-height: 30px;
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
      }

      &_num {
        width: 25%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .container2 {
    width: 280px;
    height: 240px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_left1.png");
    flex-direction: column;

    &_emphasis {
      width: 260px;
      height: 520px;

      &_firm {
        width: 100%;
        height: 180px;
        margin-top: 10px;
        position: relative;

        &_fontColor {
          font-size: 14px;
          font-family: Noto Sans SC-Medium, Noto Sans SC;
          font-weight: 500;
          color: #00e6ff;
          margin-bottom: 5px;
        }

        &_imgBox {
          width: 100%;
          height: 154px;
          margin-top: 8px;
          background-size: 100% 100%;
          background-image: url("@/assets/bg_pt.png");
        }
      }
    }

    &-place {
      margin-left: 60px;
      width: 200px !important;
      height: 28px;
    }
  }
}

.trackContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .track {
    width: 269px;
    height: 41px;
    margin-right: 5px;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_track.png");

    .icon {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-image: url("@/assets/icon_track.png");
    }

    .name {
      margin-left: 7px;
      height: 14px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1CFDFF;
      line-height: 14px;
    }

    .type {
      //white-space: nowrap;
      margin-top: 5px;
      height: 8px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 8px;
      overflow: hidden; /* 控制超出部分隐藏 */
      word-break: break-all; /* 超出部分强制换行 */
    }
  }
}

.intentionStyle {
  width: 300px;
  height: 200px;
}

.intentionContainerPadding {
  padding: 10px 16px 0px 15px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .ws-player {
    height: calHeight_2k(120px);
    margin-top: calHeight_2k(16px);
  }
  .marginL21 {
    margin-left: calHeight_2k(6px);
  }

  .marginL13 {
    margin-left: calHeight_2k(6px);
  }

  .rightView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(600px);

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &-camera {
        &_firm {
          height: calHeight_2k(180px);
          margin-top: calHeight_2k(10px);

          &_imgBox {
            height: calHeight_2k(100px);
            margin-top: calHeight_2k(8px);
          }
        }
      }


      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(20px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_intention {
        height: calHeight_2k(161px);

        &_line {
          height: calHeight_2k(1px);
        }

        &_bg {
          height: calHeight_2k(161px);
        }

        &_title {
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }

        &_type {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

        &_num {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }
      }
    }

    .container2 {
      height: calHeight_2k(240px);

      &_emphasis {
        height: calHeight_2k(520px);

        &_firm {
          height: calHeight_2k(180px);
          margin-top: calHeight_2k(10px);

          &_fontColor {
            margin-bottom: calHeight_2k(5px);
          }

          &_imgBox {
            height: calHeight_2k(154px);
            margin-top: calHeight_2k(8px);
          }
        }
      }
    }
  }

  .trackContainer {

    .track {
      height: calHeight_2k(41px);
      margin-top: calHeight_2k(5px);

      .icon {
        height: calHeight_2k(14px);
      }

      .name {
        height: calHeight_2k(14px);
        line-height: calHeight_2k(14px);
      }

      .type {
        margin-top: calHeight_2k(5px);
        height: calHeight_2k(8px);
        line-height: calHeight_2k(8px);
      }
    }
  }

  .intentionStyle {
    height: calHeight_2k(200px);
  }

  .intentionContainerPadding {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(0px);
  }
}

</style>
